<template>
  <div class="container">
    <div class="top">
      <div class="left">
        <div class="leftTop">
          <img
            :src="
              currentImg || goodsList.goodsDetail.skuInfo.skuImageList[0].imgUrl
            "
            alt=""
          />
        </div>
        <div class="leftBottom">
          <img
            v-for="(item, index) in goodsList.goodsDetail.skuInfo.skuImageList"
            :key="index"
            :src="item.imgUrl"
            :class="{ current: index == current }"
            @click="changeCurrent(item.imgUrl, index)"
            alt=""
          />
        </div>
      </div>
      <div class="right">
        <h5>{{ goodsList.goodsDetail.skuInfo.skuName }}</h5>
        <i>{{ goodsList.goodsDetail.skuInfo.skuDesc }}</i>
        <div class="table">
          <span
            ><a>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</a
            ><a
              >¥<span>{{ goodsList.goodsDetail.skuInfo.price }}</span
              >降价通知</a
            ></span
          >
          <span
            ><a>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</a
            ><a
              ><span>加价购</span
              >满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</a
            ></span
          >
        </div>
        <a
          ><span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span
          ><span>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</span></a
        >
        <a><span>配 送 至</span><span>广东省 深圳市 宝安区</span></a>
        <div class="color" v-show="goodsList.goodsDetail.spuSaleAttrList">
          <a>{{ goodsList.goodsDetail.spuSaleAttrList[0].saleAttrName }}</a>
          <button
            @click="changeColor(item.saleAttrValueName)"
            :class="{ colorCurrent: goods.color === item.saleAttrValueName }"
            v-for="(item, index) in goodsList.goodsDetail.spuSaleAttrList[0]
              .spuSaleAttrValueList"
            :key="index"
          >
            {{ item.saleAttrValueName }}
          </button>
        </div>
        <!-- <div class="color" v-show="goodsList.goodsDetail.spuSaleAttrList">
          <a>{{ goodsList.goodsDetail.spuSaleAttrList[1].saleAttrName }}</a>
          <button
            @click="changeVerison(item.saleAttrValueName)"
            :class="{ colorCurrent: goods.verison === item.saleAttrValueName }"
            v-for="(item, index) in goodsList.goodsDetail.spuSaleAttrList[1]
              .spuSaleAttrValueList"
            :key="index"
          >
            {{ item.saleAttrValueName }}
          </button>
        </div> -->
        <el-input-number
          v-model="goods.goodsNum"
          :min="1"
          :max="10"
          label="描述文字"
        ></el-input-number>
        <el-button type="danger " size="default" @click='addShoppingCar'>加入购物车</el-button>
      </div>
    </div>
    <div class="main">
      <div class="leftt">
        <ul>
          <li>推荐品牌</li>
          <li>
            <img src="./img/下载.png" alt="" /><br />
            <h6>Apple苹果iPhone 6s (A1699)</h6>
            <p>¥6088.00</p>
          </li>
          <li>
            <img src="./img/part02.7c64c553.png" alt="" /><br />
            <h6>Apple苹果iPhone 6s (A1699)</h6>
            <p>¥6088.00</p>
          </li>
          <li>
            <img src="./img/part03.309cee5c.png" alt="" /><br />
            <h6>Apple苹果iPhone 6s (A1699)</h6>
            <p>¥6088.00</p>
          </li>
          <li>
            <img src="./img/下载.png" alt="" /><br />
            <h6>Apple苹果iPhone 6s (A1699)</h6>
            <p>¥6088.00</p>
          </li>
          <li>
            <img src="./img/part02.7c64c553.png" alt="" /><br />
            <h6>Apple苹果iPhone 6s (A1699)</h6>
            <p>¥6088.00</p>
          </li>
          <li>
            <img src="./img/part03.309cee5c.png" alt="" /><br />
            <h6>Apple苹果iPhone 6s (A1699)</h6>
            <p>¥6088.00</p>
          </li>
        </ul>
      </div>
      <div class="rightt">
        <div class="righttTop">
          <div class="shang">
            <span>选择搭配</span>
          </div>
          <div class="xia">
            <ul>
              <li>
                <img
                  :src="goodsList.goodsDetail.skuInfo.skuImageList[0].imgUrl"
                  alt=""
                />
              </li>
              <span>+</span>
              <li>
                <img src="./img/下载 (1).png" alt="" />
                <el-checkbox>Feless费勒斯VR</el-checkbox>
              </li>
              <li>
                <img src="./img/dp02.3bc06d51.png" alt="" />
                <el-checkbox>Feless费勒斯VR</el-checkbox>
              </li>
              <li>
                <img src="./img/dp03.078d5658.png" alt="" />
                <el-checkbox>Feless费勒斯VR</el-checkbox>
              </li>
              <li>
                <img src="./img/dp04.48bb0acb.png" alt="" />
                <el-checkbox>Feless费勒斯VR</el-checkbox>
              </li>
              <li>
                <p>已选择0件商品</p>
                <h6>套餐价</h6>
                <i>￥5299</i>
                <el-button type="danger" size="default">加入购物车</el-button>

              </li>
            </ul>
          </div>
        </div>
        <div class="tab">
          <div class="tabTop">
            <a
              href="javascript:;"
              @click="changeTabCurrent0()"
              :class="{ tabCurrent: 0 === tabCurrentt }"
              >商品介绍</a
            >
            <a
              href="javascript:;"
              @click="changeTabCurrent1()"
              :class="{ tabCurrent: 1 === tabCurrentt }"
              >规格与包装</a
            >
            <a
              href="javascript:;"
              @click="changeTabCurrent2()"
              :class="{ tabCurrent: 2 === tabCurrentt }"
              >售后保障</a
            >
            <a
              href="javascript:;"
              @click="changeTabCurrent3()"
              :class="{ tabCurrent: 3 === tabCurrentt }"
              >手机社区</a
            >
          </div>
          <div class="tabMain">
            <component :is="currentComponent"></component>
          </div>
        </div>
      </div>
    </div>
    <RightNav ref="NavRef"></RightNav>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import afterSale from './components/afterSale.vue'
import goodsIntroduce from './components/goodsIntroduce'
import size from './components/size.vue'
import community from './components/community.vue'
export default {
  data () {
    return {
      tabCurrentt: 0,
      currentComponent: 'goodsIntroduce',
      currentImg: '',
      current: 0,
      goodsList: {
        goodsDetail: {
          skuInfo: {
            id: 0,
            price: 8197,
            skuName:
              'Apple iPhone 12 (A2404) 64GB 白色 支持移动联通电信5G 双卡双待手机',
            skuDesc:
              'Apple iPhone 12 (A2404) 128GB 红色 支持移动联通电信5G 双卡双待手机',
            skuImageList: [
              {
                id: 50,
                skuId: 11,
                imgName: '2689bc534d570eaf.jpg',
                imgUrl:
                  'http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-rgfWAO2oYAAEw9kY2VKk982.jpg',
                spuImgId: 13,
                isDefault: '0'
              },
              {
                id: 51,
                skuId: 11,
                imgName: '7ae59d1d962f0965.jpg',
                imgUrl:
                  'http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-rgfWAFeQLAAEt9MLZnho584.jpg',
                spuImgId: 16,
                isDefault: '0'
              },
              {
                id: 52,
                skuId: 11,
                imgName: 'de33680f921e5838.jpg',
                imgUrl:
                  'http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-rgfWASR1YAADsOUYB-2g312.jpg',
                spuImgId: 17,
                isDefault: '1'
              },
              {
                id: 53,
                skuId: 11,
                imgName: 'f73bfe30f5ec641a.jpg',
                imgUrl:
                  'http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-rgfWABhwlAAEjBwwVkrI735.jpg',
                spuImgId: 18,
                isDefault: '0'
              }
            ],
            skuSaleAttrValueList: [
              {
                id: 21,
                skuId: 11,
                spuId: 3,
                saleAttrValueId: 12,
                saleAttrId: 1,
                saleAttrName: '颜色',
                saleAttrValueName: '白色'
              },
              {
                id: 22,
                skuId: 11,
                spuId: 3,
                saleAttrValueId: 13,
                saleAttrId: 2,
                saleAttrName: '版本',
                saleAttrValueName: '64G'
              }
            ]
          },
          spuSaleAttrList: [
            {
              id: 5,
              spuId: 3,
              baseSaleAttrId: 1,
              saleAttrName: '颜色',
              spuSaleAttrValueList: [
                {
                  id: 9,
                  spuId: 3,
                  baseSaleAttrId: 1,
                  saleAttrValueName: '黑色',
                  saleAttrName: '颜色',
                  isChecked: '0'
                },
                {
                  id: 10,
                  spuId: 3,
                  baseSaleAttrId: 1,
                  saleAttrValueName: '红色',
                  saleAttrName: '颜色',
                  isChecked: '0'
                },
                {
                  id: 11,
                  spuId: 3,
                  baseSaleAttrId: 1,
                  saleAttrValueName: '蓝色',
                  saleAttrName: '颜色',
                  isChecked: '0'
                },
                {
                  id: 12,
                  spuId: 3,
                  baseSaleAttrId: 1,
                  saleAttrValueName: '白色',
                  saleAttrName: '颜色',
                  isChecked: '1'
                }
              ]
            },
            {
              id: 6,
              spuId: 3,
              baseSaleAttrId: 2,
              saleAttrName: '版本',
              spuSaleAttrValueList: [
                {
                  id: 13,
                  spuId: 3,
                  baseSaleAttrId: 2,
                  saleAttrValueName: '64G',
                  saleAttrName: '版本',
                  isChecked: '1'
                },
                {
                  id: 14,
                  spuId: 3,
                  baseSaleAttrId: 2,
                  saleAttrValueName: '128G',
                  saleAttrName: '版本',
                  isChecked: '0'
                }
              ]
            }
          ]
        }
      },
      goods: {
        color: '',
        verison: '',
        title: '',
        img: '',
        price: 0,
        goodsNum: 0
      },
      carlength: 0
    }
  },
  components: {
    goodsIntroduce,
    size,
    afterSale,
    community
  },
  computed: {
    ...mapState('detailAbout', ['goodsDetail', 'addCar'])
  },
  methods: {
    // 加入购物车
    addShoppingCar () {
      this.goods.title = this.goodsList.goodsDetail.skuInfo.skuName
      this.goods.price = this.goodsList.goodsDetail.price
      this.goods.img = this.goodsList.goodsDetail.skuInfo.skuImageList[0].imgUrl
      this.$store.dispatch('detailAbout/addShoppingCar', this.goods).then((result) => {
        if (this.$store.state.detailAbout.addCar.status === 0) {
          this.$success(this.$store.state.detailAbout.addCar.msg)
        } else {
          this.$error(this.$store.state.detailAbout.addCar.msg)
        }
      })
      this.$refs.NavRef.add()
    },
    changeTabCurrent0 () {
      this.tabCurrentt = 0
      this.currentComponent = 'goodsIntroduce'
    },
    changeTabCurrent1 () {
      this.tabCurrentt = 1
      this.currentComponent = 'size'
    },
    changeTabCurrent2 () {
      this.tabCurrentt = 2
      this.currentComponent = 'afterSale'
    },
    changeTabCurrent3 () {
      this.tabCurrentt = 3
      this.currentComponent = 'community'
    },
    changeColor (color) {
      this.goods.color = color
    },
    changeCurrent (imgUrl, index) {
      this.currentImg = imgUrl
      this.current = index
    },
    changeVerison (verison) {
      this.goods.verison = verison
    }
  },

  mounted () {
    this.$store.dispatch('detailAbout/getGoods', this.$route.params.id).then((result) => {
      setTimeout(() => {
        this.goodsList = this.$store.state.detailAbout
      }, 500)
    })
  }
}
</script>

<style scoped lang="less">
.colorCurrent {
  border: 1px solid green !important;
}
.current {
  border: 3px solid orange !important;
}
.tabCurrent {
  background-color: #c81623;
  color: #fff;
}
.container {
  width: 1200px;
  height: 1000px;
  margin: 10px auto;
  // border: 1px solid red;
  .top {
    height: 450px;
    // border: 1px solid #ccc;
    display: flex;

    .left {
      width: 350px;
      height: 450px;
      .leftTop {
        height: 350px;
        img {
          width: 100%;
          height: 100%;
          border: 1px solid #ccc;
          cursor: pointer;
        }
      }
      .leftBottom {
        height: 100px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        box-sizing: border-box;
        overflow: auto;
        img {
          height: 70px;
          width: 58px;
          border: 3px solid #fff;
          box-sizing: border-box;
          background-color: black;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
    .right {
      width: 850px;
      height: 450px;
      padding-left: 80px;
      h5 {
        color: black;
      }
      & > i {
        font-style: normal;
        font-size: 12px;
        color: #e12228;
      }
      .table {
        padding: 20px 0px 0px 10px;
        background-color: rgb(255, 233, 236);
        height: 150px;
        span {
          a {
            margin-right: 10px;
            font-size: 13px;
          }
        }
        & > span:nth-child(1) {
          display: block;
          & > a:nth-child(2) {
            color: #e12228;
            font-size: 12px;
            font-weight: bold;
            span {
              font-size: 25px;
            }
          }
        }
        & > span:nth-child(2) {
          margin-top: 20px;
          display: flex;
          & > a:nth-child(2) {
            display: block;
            color: #ccc;
            font-size: 12px;
            line-height: 25px;
            width: 500px;
            span {
              display: block;
              float: left;
              background-color: #c81623;
              color: #fff;
              line-height: 20px;
              width: 50px;
              text-align: center;
              height: 20px;
              font-size: 13px;
              padding: 2px;
            }
          }
        }
      }
      & > a:nth-child(4),
      & > a:nth-child(5) {
        margin: 15px 0;
        padding-left: 10px;
        display: block;
        & span:nth-child(1) {
          font-size: 13px;
          margin-right: 10px;
        }
        & span:nth-child(2) {
          font-size: 13px;
          margin-right: 10px;
          color: #ccc;
        }
      }
      & > a:nth-child(5) {
        border-bottom: 1px solid #ccc;
      }
      .color,
      .version {
        display: flex;
        align-items: center;
        margin: 10px 0;
        a {
          display: block;
          padding-left: 10px;
          font-size: 14px;
          margin-right: 10px;
        }
        button {
          outline: none;
          height: 30px;
          padding: 5px 10px;
          box-sizing: border-box;
          background-color: #fff;
          border: 1px solid #ccc;
        }
      }
      .el-button {
        margin-left: 10px;
      }
    }
  }
  .main {
    .leftt {
      float: left;
      border: 1px solid #ccc;
      width: 230px;
      ul {
        margin: 0;
        padding: 0 10px;
        & li:nth-child(1) {
          height: 40px;
          line-height: 40px;
          font-weight: bold;
        }
        li {
          text-align: center;
          border-bottom: 1px solid rgb(240, 235, 235);
          h6 {
            margin: 0;
            padding: 0;
          }
          p {
            color: #c81623;
          }
        }
      }
    }
    .rightt {
      float: left;
      height: 600px;
      width: 960px;
      margin-left: 10px;
      .shang {
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        font-size: 14px;
        font-weight: bold;
        background-color: rgb(241, 234, 234);
      }
      .xia {
        ul {
          display: flex;
          border: 1px solid #ccc;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
          overflow: hidden;
          span {
            line-height: 150px;
          }
          li {
            // height: 170px;
            flex: 1;
            width: 130px;
            margin-right: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            // border: 1px solid red;
            img {
              width: 100%;
            }
          }
          & li:nth-child(7) {
            margin-right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            p,
            h6,
            i {
              margin: 0;
              padding: 0;
              font-style: normal;
            }
            h6 {
              margin: 5px 0;
            }
            i {
              color: #c81623;
            }
          }
        }
      }
      .tab {
        .tabTop {
          display: flex;
          height: 45px;
          border-bottom: 3px solid #c81623;
          a {
            display: block;
            float: left;
            line-height: 45px;
            padding: 0 15px;
            font-size: 14px;
          }
        }
        .tabMain {
          font-size: 13px;
          line-height: 25px;
        }
      }
    }
  }
}
</style>
